<template>
    <div class="manage-searchbar">
        <div class="manage-searchbar__inner">
            <input class="manage-searchbar__inner-input text-center" :placeholder="placeholder" v-model.trim="content"/>
        </div>
        <div class="btn btn-mobile btn-white btn-normal fourth-border" @click="onClickSearch">搜索</div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component({
    name: 'SearchBar',
})
export default class SearchBar extends Vue {
    /** placeholder */
    @Prop({ type: String }) public placeholder?: string;
    /** 填写内容 */
    @Prop({ type: String }) public value?: string;

    public content = '';

    @Watch('$props.value')
    public onPropsValue() {
        this.content = this.value;
    }
    @Watch('content')
    public onContent() {
        this.$emit('input', this.content);
    }

    /**
     * 点击搜索
     */
    public onClickSearch() {
        this.$emit('search');
    }

    public created() {
        this.content = this.value;
    }
}
</script>

<style lang="less">
@import "../../../lib/style/mixins.less";

.manage-searchbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;

    &__inner {
        box-sizing: border-box;
        flex: 1;
        padding: 10rpx 20rpx;
        margin-right: 20rpx;
        border: 2rpx solid #BBBBBB;
        border-radius: 40rpx;
        &-input {
            position: relative;
            box-sizing: border-box;
            width: 100%;
            padding: 0 60rpx;
            &::before {
                position: absolute;
                left: 20rpx;
                top: 50%;
                transform: translateY(-50%);
                font-family: 'iconfont';
                content: "\e610";
                font-size: 32rpx;
                color: @grey-color;
                pointer-events: none;
            }
        }
    }
}
</style>
